<div class="underlying">
    <div class="table">
        <div class="bbs">
            <!-- 下载文件 -->
            <button class="btn_download" (click)="downLoad()"></button>
        </div>
        <!-- 头部Table -->
        <nz-table #headerTable style="border-collapse: collapse; border-radius: 4px 4px 0px 0px;" [nzData]="listOfData"
            class="designTable" [nzShowPagination]='false' [nzScroll]="{ y: '620px',x: '1950px' }">
            <thead class="tableHeard" style="text-align: center !important;">
                <tr style="text-align: center !important;">
                    <th nzWidth="120px">狀態</th>
                    <th nzWidth="100px">廠別</th>
                    <th nzWidth="150px">機種</th>
                    <th nzWidth="230px">治具名稱</th>
                    <th nzWidth="150px">數量</th>
                    <th nzWidth="150px">治具交期</th>
                    <th nzWidth="150px">申請人</th>
                    <th nzWidth="220px">工聯單號</th>
                    <th nzWidth="80px"></th>
                    <th nzWidth="150px">設計</th>
                    <th nzWidth="150px">CNC加工</th>
                    <th nzWidth="150px">二次加工</th>
                    <th nzWidth="150px">組裝調試</th>
                </tr>
            </thead>
            <!-- 工联单Table -->
            <tbody class="tablecontent" style="border-left: 1px solid rgba(71,156,156,1) !important;">
                <!--   -->
                <tr id="first" class="plantd" *ngFor="let item of listOfData let key = index">
                    <!-- 狀態 -->
                    <td style="color: #D23B5F;" *ngIf="item.status==='Delay'">{{item.status}}</td>
                    <td style="color: #FACA00;" *ngIf="item.status==='Ongoing'">{{item.status}}</td>
                    <td style="color: #21CC97;" *ngIf="item.status==='Cancel'">{{item.status}}</td>
                    <!-- 廠別 -->
                    <td>{{item.factory}}</td>
                    <!-- 機種 -->
                    <td style="max-width: 150px;">{{item.machine_type}}</td>
                    <!-- 治具名稱 -->
                    <td style="cursor:pointer;max-width: 230px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis;text-align: left;"
                        title={{item.name}}>{{item.name}}</td>
                    <td>{{item.quatity}}</td>

                    <!-- 治具交期 -->
                    <td>{{item.delivery_date}}</td>
                    <!-- 申請人 -->
                    <td>{{item.apply_person}}</td>
                    <!-- 工聯單號 -->
                    <td style="text-align: left;">{{item.unionorder}}</td>
                    <td style="color: #83E3E3;">
                        <div>計劃</div>
                        <div>實際</div>
                    </td>
                    <!-- 设计 -->
                    <td>
                        <div style="height: 24px;">{{item.design_qixian}}</div>
                        <div style="height: 24px;">{{item.design_endtime}}</div>
                        <!-- <div *ngIf="isShowDesign[key]" style="height: 24px;">{{item.design_endtime}}</div> -->
                        <!-- <div *ngIf="isdelayDesign[key]" style="height: 24px;color: #D23B5F;" title={{item.delay_remark}}>{{item.design_endtime}}</div> -->
                    </td>
                    <!-- cnc加工 -->
                    <td>
                        <div style="height: 24px;">{{item.jiagong_qixian}}</div>
                        <div style="height: 24px;">{{item.jiagong_endtime}}</div>
                        <!-- <div *ngIf="isShowJiagong[key]" style="height: 24px;">{{item.jiagong_endtime}}</div> -->
                        <!-- <div *ngIf="isdelayJiagong[key]" style="height: 24px;color: #D23B5F;" title={{item.delay_remark}}>{{item.jiagong_endtime}}</div> -->
                    </td>
                    <!-- 二次加工 -->
                    <td>
                        <div style="height: 24px;">{{item.ercijg_qixian}}</div>
                        <div style="height: 24px;">{{item.ercijg_endtime}}</div>
                        <!-- <div *ngIf="isShowErci[key]" style="height: 24px;">{{item.ercijg_endtime}}</div> -->
                        <!-- <div *ngIf="isdelayErci[key]" style="height: 24px;color: #D23B5F;" title={{item.delay_remark}}>{{item.ercijg_endtime}}</div> -->
                    </td>
                    <!-- 组装 -->
                    <td>
                        <div style="height: 24px;">{{item.zuzhuang_qixian}}</div>
                        <div style="height: 24px;">{{item.zuzhuang_endtime}}</div>
                        <!-- <div *ngIf="isShowZuzhuang[key]" style="height: 24px;">{{item.zuzhuang_endtime}}</div> -->
                        <!-- <div *ngIf="isdelayZuzhuang[key]" style="height: 24px;color: #D23B5F;" title={{item.delay_remark}}>{{item.zuzhuang_endtime}}</div> -->
                    </td>
                </tr>
            </tbody>
        </nz-table>
    </div>
</div>